<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/main_home.css">

</head>

<body>
    <div id="vm">
        <div id="global">
        </div>

        <div class="nav">
            <p>Hello,{{name}}</p>
            <div class="logout" @click="logOut">
                登出
            </div>
        </div>

        <div class="title">
            选择入口
        </div>

        <div class="mask" v-show="mask"></div>
        <div class="card-container">
            <div class="card" @click="showHostDialog">
                <div class="img-container">
                    <img src="/images/host.png" alt="" style="width:120px">
                </div>
                <div class="text-container">
                    <div>我是房主,我要发布房源.</div>
                </div>
            </div>
            <div class="card" @click="showStuDialog">
                <div class="img-container">
                    <img src="/images/stu.png" alt="" style="width:120px">
                </div>
                <div class="text-container">
                    <div>我是房客,我要订购房源.</div>
                </div>
            </div>
        </div>

        <div class="sign-host" v-show="HostDialing">
            <div class="s-title">
                <h1>房主信息登记</h1>
            </div>
            <div class="x" @click="closeSign">×</div>
            <form action="#" @submit.prevent="signHost">
                <div class="item">
                    <label> 电话 : <input v-model="hostphone" type="text" required autofocus /> </label>
                </div>
                <div class="item">
                    <label> 地址 : <input v-model="hostaddress" type="text" required autofocus /> </label>
                </div>
                <div class="btn">
                    <input type="submit" value="提交" />
                </div>
            </form>
        </div>

        <div class="sign-stu" v-show="StuDialing">
            <div class="s-title">
                <h1>房客信息登记</h1>
            </div>
            <div class="x" @click="closeSign">×</div>
            <form action="#" @submit.prevent="signStu">
                <div class="item" style="margin-top: 0;">
                    <label> 电话 : <input v-model="stuphone" type="text" required autofocus /> </label>
                </div>
                <div class="item" style="margin-top: 0;">
                    <label> 地址 : <input v-model="stuaddress" type="text" required autofocus /> </label>
                </div>
                <div class="item" style="margin-top: 0;">
                    <label> 生日 : <input v-model="stubirthday" type="date" required autofocus style="text-indent: 2em" />
                    </label>
                </div>
                <div class="btn">
                    <input type="submit" value="提交" />
                </div>
            </form>
        </div>
        <div class="sign-stu" v-show="isNeedPw">
            <div class="s-title">
                <h1>
                    <p v-show="PwFalse">密码错误 请重试</p><br />
                    <p>输入密码确认</p>
                </h1>
            </div>
            <form action="#" @submit.prevent="jump">
                <div class="item" style="margin-top: 0;">
                    <label> 密码 : <input v-model="password" type="password" required autofocus /> </label>
                </div>
                <div class="btn">
                    <input type="submit" value="提交" />
                </div>
            </form>
        </div>
    </div>
</body>

<script>
    let vm = new Vue({
        el: '#vm',
        data: {
            mask: false,
            StuDialing: false,
            HostDialing: false,
            isHost: false,
            isStu: false,
            isNeedPw: false,
            PwFalse: false,
            hostphone: '',
            hostaddress: '',
            stuphone: '',
            stuaddress: '',
            stubirthday: '',
            username: 'default',
            password: null,
            name,
        },
        methods: {
            showHostDialog: function () {
                if (vm.isHost) {
                    window.location.replace('/host/home');
                    return
                }
                vm.HostDialing = true;
                vm.mask = true;
            },
            showStuDialog: function () {
                if (vm.isStu) {
                    window.location.replace('/stu/home');
                    return
                }
                vm.StuDialing = true;
                vm.mask = true;
            },
            closeSign: function () {
                vm.StuDialing = false;
                vm.HostDialing = false;
                vm.mask = false;
            },
            getRole: () => {
                axios({
                    method: 'post',
                    url: '/user/getRole'
                })
                    .then((res) => {
                        vm.username = res.data.data.username;
                        vm.isHost = res.data.data.isHost;
                        vm.isStu = res.data.data.isStu;
                        vm.name=res.data.data.name;
                    })
            },
            signHost: () => {
                axios({
                    method: 'post',
                    url: '/user/signHost',
                    data: {
                        phone: vm.hostphone,
                        address: vm.hostaddress,
                    }
                })
                    .then((r) => {
                        if (r.data.code === 200) {
                            vm.isNeedPw = true
                        }
                    })
            },
            signStu: () => {
                axios({
                    method: 'post',
                    url: '/user/signStu',
                    data: {
                        phone: vm.stuphone,
                        address: vm.stuaddress,
                        birthday: vm.stubirthday
                    }
                })
                    .then((r) => {
                        if (r.data.code === 200) {
                            vm.isNeedPw = true
                        }
                    })
            },
            jump: function () {
                axios({
                    method: 'post',
                    url: '/login',
                    params: {
                        username: vm.username,
                        password: vm.password
                    }
                })
                    .then((r) => {
                        if (r.status === 200) {
                            if (vm.StuDialing) {
                                window.location.replace('/stu/home')
                            }
                            else {
                                window.location.replace('/host/home')
                            }
                        }
                        else {
                            window.location.replace('/user/home')
                            vm.PwFalse = true
                        }
                    })
                    .catch((err) => {
                        console.log(err);

                    })
            },
            logOut: function () {
                axios({
                    method: 'post',
                    url: '/logout',
                })
                    .then(() => {
                        window.location.replace('/')
                    })
            }
        },
    });
    window.onload = vm.getRole
</script>

</html>
